<template>
  <!-- 添加角色的对话框 -->
  <el-dialog
    title="添加角色"
    v-model="addDialogVisible"
    width="40%"
    @close="addDialogClose"
  >
    <!-- 内容主体区域 -->
    <!-- 表单中model和rules名称不可以相同 -->
    <el-form
      ref="addFormRef"
      :model="addForm"
      :rules="addFromRules"
      label-width="70px"
    >
      <el-form-item label="角色名" prop="roleName">
        <el-input v-model="addForm.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="addForm.roleDesc"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogClose">取 消</el-button>
        <el-button type="primary" @click="addNewRole">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { addRole } from "network/role.js";
export default {
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false
    },
    addFromRules: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      addForm: {
        roleName: "",
        phoneNumber: "",
        roleDesc: ""
      }
    };
  },
  emits: ["addDialogClose"],
  methods: {
    //监听添加角色对话框的关闭事件
    addDialogClose() {
      this.$emit("addDialogClose");
      this.$refs.addFormRef.resetFields();
    },
    //点击按钮,添加新角色
    addNewRole() {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid);//校验成功true,失败false
        if (!valid) return;
        //发起网络请求
        const res = await addRole(this.addForm);
        if (!res.success)
          return this.$message.error({ showClose: true, message: res.msg });
        this.$message.success({ showClose: true, message: res.msg });
        this.$emit("addDialogClose", true);
      });

      //   this.addDialogClose();
    }
  }
};
</script>

<style></style>
